<template>
    <div>
        <div class="amap-wrapper">
            <!-- :events="events" -->
            <div id="container"></div>
        </div>
        <div class="dialog-footer">
            <div class="container">
                <div class="amap-address">{{ address }}</div>
                <van-button size="small" type="default" @click="$router.go(-1)">返 回</van-button>
                <van-button size="small" type="primary" :disabled="address == ''" @click="handleConfirm" style="margin-left: 0.5rem">确 认</van-button>
            </div>
        </div>
    </div>
</template>

<script>

let marker,map = null

export default {
    props: {
        baseAddress: {
            type: Object,
            default: () => {}
        },
    },
    data() {
        return {
            dialogVisible: false,
            searchAddress: "",
            address: "",
            longitude: "",
            latitude: "",
            markers: [],
            mapCenter: [118.516434, 37.421071],
            center: [118.516434, 37.421071],
            lng: 0,
            lat: 0,
            showSearchResult: false,
            searchList: [],
            events: {},
            positions: [],
        }
    },
    methods: {
        handleConfirm(){
            let { baseAddress } = this,
                { lnglat: s_lnglat, address: s_address } = baseAddress

            if(s_lnglat && s_address){
                this.$router.go(-1)
            }else{
                this.$emit('setAddress', this.positions)
            }
        },
        setCenter(position){
            map.setCenter(position);
        },
        setMarker(position){

            marker = new AMap.Marker({
                position: position,
            });

            marker.setMap(map);
        }
    },
    mounted() {
        this.$nextTick(() =>{
            map = new AMap.Map("container", {
                zoom: 8,
                zoomEnable: true //地图是否可缩放，默认值为true  
            });

            marker = new AMap.Marker();

            marker.setMap(map);

            map.plugin('AMap.Geolocation', function () {
                let geolocation = new AMap.Geolocation({
                    enableHighAccuracy: true,//是否使用高精度定位，默认:true
                    timeout: 10000,          //超过10秒后停止定位，默认：无穷大
                    // maximumAge: 0,           //定位结果缓存0毫秒，默认：0
                    // convert: true,           //自动偏移坐标，偏移后的坐标为高德坐标，默认：true
                    showButton: true,        //显示定位按钮，默认：true
                    buttonPosition: 'LT',    //定位按钮停靠位置，默认：'LB'，左下角
                    // buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
                    // showMarker: true,        //定位成功后在定位到的位置显示点标记，默认：true
                    showCircle: false,        //定位成功后用圆圈表示定位精度范围，默认：true
                    // panToLocation: true,     //定位成功后将定位到的位置作为地图中心点，默认：true
                    zoomToAccuracy:true      //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
                });
                map.addControl(geolocation);
                geolocation.getCurrentPosition((status, result) => {
                    if(status=='complete') {
                        map.panTo([result.position.lng, result.position.lat]);
                    }
                });
     
            });

            let { baseAddress } = this,
                { lnglat: s_lnglat, address: s_address } = baseAddress

            if(s_lnglat && s_address){
                let pos = JSON.parse(s_lnglat),
                    lastPos = pos[pos.length - 1],
                    { lng, lat } = lastPos;
                this.setCenter([lng, lat])
                console.log(pos)
                marker.setPosition([pos[pos.length-1].lng, pos[pos.length-1].lat]); //更新点标记位置

                // pos.map(item => {
                //     this.setMarker([item.lng, item.lat])
                // })
                // this.markers = [this.center];
                // this.mapCenter = this.center;
                this.address = s_address
            }else{
                map.on('click', (e) =>{
                    let { lng, lat } = e.lnglat;
                    // console.log(this.markers);
                    // this.setCenter([lng, lat])
                    // this.setMarker([lng, lat]);
                    let lnglat = { lat, lng };

                    // marker = new AMap.Marker({
                    //     position: [lng, lat],
                    // });

                    // marker.setMap(map);
                    marker.setPosition([lng, lat]); //更新点标记位置

                    // 这里通过高德 SDK 完成。
                    let geocoder = new AMap.Geocoder({
                        radius: 1000,
                        extensions: "all",
                    });
                    geocoder.getAddress([lng, lat], (status, result) => {
                        if (status === "complete" && result.info === "OK") {
                            if (result && result.regeocode) {
                                // console.log(result.regeocode);
                                let address = result.regeocode.formattedAddress;
                                this.address = address
                                // self.address = result.regeocode.formattedAddress;
                                // this.positions.push({ lnglat , address })
                                this.positions = [{ lnglat , address }]
                                // this.$emit('setAddress',{ lnglat , address })
                            }
                        }
                    });
                });
            }
            
            map.on('complete', () => {
                console.log('地图加载完毕')
                // this.setMarker(map.getCenter());
            });
            
            
        })
   
   }
}
</script>

<style lang="scss" scoped>
    #container {
        width:100%;
        height:100%
    }
    .el-icon-location-outline {
        font-size: 24px;
        color: #30808b;
        cursor: pointer;
    }
    .amap-wrapper {
        position: relative;
        height: 100vh;
        // .search-box {
        //   position: absolute;
        //   top: 25px;
        //   left: 20px;
        // }
        .search-box {
            background: #fff;
            position: absolute;
            top: 10px;
            right: 15px;
            z-index: 1;
            display: flex;

            box-sizing: border-box;
            padding: 10px 20px;

            &-address {
                display: flex;
                align-items: center;
                flex-shrink: 0;
                ::v-deep {
                    .el-input__inner {
                        width: 300px;
                    }
                }
            }
            &-position {
                display: flex;
                flex-shrink: 0;
                align-items: center;
                margin-left: 40px;
                ::v-deep {
                    .el-input__inner {
                        width: 160px;
                        text-align: center;
                    }
                }
                .text {
                    padding: 0 20px;
                    flex-shrink: 0;
                }
            }
            ::v-deep {
                .el-input__inner {
                    height: 36px;
                    border-radius: 8px;
                    color: #333;
                }
                .el-button {
                    margin-left: 10px;
                    padding: 8px 20px;
                }
            }
            .search-result {
                // width: 300px;
                position: absolute;
                top: 50px;
                left: 20px;
                display: flex;
                flex-direction: column;
                background: #fff;
                // padding: 0 20px;
                padding-bottom: 20px;
                line-height: 1;
                &-item:hover {
                    background: #eee;
                }
                &-item {
                    display: flex;
                    align-items: center;
                    // margin-top: 10px;
                    padding: 10px;
                    cursor: pointer;
                    span:first-child {
                        color: #333;
                    }
                    span:last-child {
                        font-size: 12px;
                        color: #999;
                        margin-left: 10px;
                    }
                }
            }
        }
    }
    .dialog-footer{
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        text-align: center;
        // margin-top: 15px;
        padding: .266667rem 0;
        background: #fff;
        .amap-address { 
            // padding-top: 10px;
            height: 26px;
            padding-left: 10px;
            text-align: left;
            margin-bottom: 5px;
        }
    }
    
</style>

<style>
.amap-logo {
    display: none !important;
}
.amap-copyright {
    display: none !important;
}
</style>